<template>
    <div>
        <div class="top-z">
            <div class="top-left">
                <img src="@/public/images/logo.png" alt="" class="logo">
                <ul class="top-menu">
                    <li v-for="(tm,index) in topManu" :key="index" v-bind:class="[changeId == index  ? 'border-li' : '']" @click="doClick(index,tm.menu)">{{tm.name}}</li>
                </ul>
            </div>
            <div class="top-right">
                <el-dropdown>
                    <span class="el-dropdown-link xinxi">
                        <div>
                            <el-avatar class="top-tx" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        </div>
                        <div>
                            admin<i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-key">修改密码</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'KitHeader',
    data(){
        return {
          changeId: 0
        }
    },
    props: {
      topManu: Array
    },
    methods: {
      utlto(i){
        this.$router.push(i)
      },
      doClick: function(index,menu){
        this.changeId = index;
        this.$emit('doclick',{
          menu: menu
        });
      }
    }
  }
</script>

<style scoped>
@import "header.css";

</style>
